const path = require('path');

const {
    VueLoaderPlugin
} = require('vue-loader')

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const TerserPlugin = require("terser-webpack-plugin");

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

const {
    name
} = require('./package');

const isProd = process.env.NODE_ENV == 'production';

module.exports = {

    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
        extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'],
    },

    resolveLoader: {
        modules: ['node_modules'], // , "myModules"
        // 入口文件的后缀
        extensions: ['.js', '.json'],
    },

    target: "browserslist",

    mode: !isProd ? 'development' : "production",

    devtool: !isProd ? "eval-source-map" : false,

    entry: {
        index: './src/index.ts',
    },

    output: {
        clean: true,
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        chunkFilename: '[name].chunk.js',
        library: `${name}-[name]`,
        libraryTarget: 'umd', // 把微应用打包成 umd 库格式
        chunkLoadingGlobal: `webpackJsonp_${name}`
    },

    devServer: {
        // contentBase: path.join(__dirname, 'dist'),
        compress: true,
        // publicPath: 'dist',
        historyApiFallback: true,
        port: 8098,
        // host: '0.0.0.0',
        // inline: true,
        open: true
    },

    module: {

        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },

            {
                test: /\.js$/,
                exclude: "/node_modules/",
                use: {
                    loader: 'babel-loader'
                }
            },

            {
                test: /\.(ts|tsx)$/,
                use: [{
                    loader: 'cache-loader'
                }, {
                    loader: 'babel-loader'
                }, {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true,
                        appendTsSuffixTo: ['\\.vue$'],
                        happyPackMode: true
                    },
                }],
            },

            {
                test: /\.(less|css)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },

            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    name: 'imgs/[name].[hash:4].[ext]',
                    limit: 100,
                    publicPath: '../'
                }
            },

            {
                test: /\.(woff|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 1,
                    name: 'css/fonts/[name].[hash:4].[ext]',
                    publicPath: '../'
                }
            }



        ]
    },

    plugins: [
        // 请确保引入这个插件来施展魔法
        new VueLoaderPlugin(),

        new HtmlWebpackPlugin({
            // filename: 'test.html',
            // publicPath:"./",
            template: './src/index.html',
            inject: 'body',
        }),

        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            // chunkFilename: 'css/[name]_[id].css?t=' + (+new Date()),
        }),

        // 变量 定义完后可以在项目中直接使用
        new webpack.DefinePlugin({
            'process.env.test': '"我是webpacktest"',
            'process.env.BASE_URL': '"/"',
        }),

        new ForkTsCheckerWebpackPlugin()
    ],

    optimization: {
        splitChunks: {
            cacheGroups: {
                common: {
                    name: `chunk-common`,
                    minChunks: 2,
                    priority: -20,
                    chunks: 'initial',
                    reuseExistingChunk: true
                },
                styles: {
                    name: "app",
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                },
                vendors: {
                    name: 'chunk-vendors',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: 'initial',
                }
            },
        },
        minimizer: [
            new TerserPlugin(),
            new CssMinimizerPlugin(),
        ],
    }



}